<div class="section-heading row mb-3">
  {{ with .page.Params.title }}
  <div class="col-12">
    <div class="row justify-content-center">
      <h1 class="text-center">{{ . | markdownify | safeHTML }}</h1>
    </div>
  </div>
  {{ end }}
  {{ with .page.Params.subtitle }}
  <div class="col-12">
    <div class="row justify-content-center">
      <p class="text-center">{{ . | markdownify | safeHTML }}</p>
    </div>
  </div>
  {{ end }}
</div>

{{ with .page.Params.project }}
  <div class="projects row">
    {{ range . }}
    {{ $title := .title | default "" }}
    {{ $url := .url | default "#" }}
    <div class="project col-12">
      <div class="row">
        <div class="logo col-2 d-none d-md-block">
          <div class="row justify-content-end">
            {{ with .logo }}
            <a href="{{ $url | relURL }}" class="view-list-item mb-3" target="_blank">
              {{ $width := .width | default "100%" }}
              <img class="mx-auto" src="{{ printf "/img/logos/projects/%s" .filename | relURL }}" title="{{ .title | safeHTMLAttr }}" alt="{{ .title | safeHTMLAttr }}" width="{{ $width }}">
            </a>
            {{ end }}
          </div>
        </div>
        <div class="logo col-12 d-block d-md-none">
          <div class="row justify-content-center">
            {{ with .logo }}
              <a href="{{ $url | relURL }}" class="view-list-item mb-3" target="_blank">
                {{ $width := .width | default "100%" }}
                <img class="mx-auto" src="{{ printf "/img/logos/projects/%s" .filename | relURL }}" title="{{ .title | safeHTMLAttr }}" alt="{{ .title | safeHTMLAttr }}" width="{{ $width }}">
              </a>
            {{ end }}
          </div>
        </div>

        <div class="text col-12 col-md-7">
          {{ if .title }}
            <h2>
              <a href="{{ $url | relURL }}" title="{{ .title | safeHTMLAttr }}" target="_blank">
              {{ .title | markdownify | safeHTML }}
              </a>
            </h2>
          {{ end }}
          {{ if .subtitle }}
            <h3>{{ .subtitle | markdownify | safeHTML }}</h3>
          {{ end }}
          {{ with .desc }}
            <div class="desc">{{ . | markdownify | safeHTML }}</div>
          {{ end }}
        </div>

        <div class="buttons col-3 d-none d-lg-block">
          <div class="row justify-content-end">
            <div class="col">
            <a href="{{ $url | relURL }}" title="{{ $title | safeHTMLAttr }}" class="mosaic-btn mosaic-btn-secondary" target="_blank">
              <i class="fa fa-external-link-alt" aria-hidden="true"></i> Project Website
            </a>
            {{ range .button }}
            {{ if and .title .url }}
            <a href="{{ .url | relURL }}" title="{{ .title | safeHTMLAttr }}" class="mosaic-btn mosaic-btn-secondary" target="_blank">
              {{ if .icon }}<i class="fa fa-{{ .icon }}" aria-hidden="true"></i>{{ end }}
              {{ .title }}
            </a>
            {{ end }}
            {{ end }}
              </div>
          </div>
        </div>
        <div class="buttons col-12 col-md-7 offset-0 offset-md-2 d-block d-lg-none">
          <div class="row justify-content-start">
            <div class="col">
            <a href="{{ $url | relURL }}" title="{{ $title | safeHTMLAttr }}" class="mosaic-btn mosaic-btn-secondary" target="_blank">
              <i class="fa fa-external-link-alt" aria-hidden="true"></i> Project Website
            </a>
            {{ range .button }}
            {{ if and .title .url }}
            <a href="{{ .url | relURL }}" title="{{ .title | safeHTMLAttr }}" class="mosaic-btn mosaic-btn-secondary" target="_blank">
              {{ if .icon }}<i class="fa fa-{{ .icon }}" aria-hidden="true"></i>{{ end }}
              {{ .title }}
            </a>
            {{ end }}
            {{ end }}
            </div>
          </div>
        </div>
      </div>
    </div>
    {{ end }}
  </div>
{{ end }}
